<template>
  <div>
    <a-radio-group v-model:value="size" @change="onChange">
      <a-radio value="default">default</a-radio>
      <a-radio value="middle">middle</a-radio>
      <a-radio value="small">small</a-radio>
    </a-radio-group>
    <br />
    <br />
    <div v-if="!isEditing">
      <a-descriptions bordered :size="size">
        <a-descriptions-item label="头像" :span="3">
          <a-image v-if="userInfo.userAvatar" :src="userInfo.userAvatar"
          :width="100" height: auto;/>
        </a-descriptions-item>
        <a-descriptions-item label="姓名">{{
          userInfo.userName
        }}</a-descriptions-item>
        <a-descriptions-item v-if="userInfo.dormitoryVO" label="宿舍号">{{
          userInfo.dormitoryVO.dormitoryName
        }}</a-descriptions-item>
        <a-descriptions-item label="角色">{{
          userInfo.userRole
        }}</a-descriptions-item>
        <a-descriptions-item label="账号">{{
          userInfo.userAccount
        }}</a-descriptions-item>
        <a-descriptions-item label="密码" :span="2">{{
          userInfo.userPassword
        }}</a-descriptions-item>
        <a-descriptions-item label="地址" :span="3">{{
          userInfo.dormitoryVO.building.address
        }}</a-descriptions-item>
        <a-descriptions-item label="简介" :span="3">{{
          userInfo.userProfile
        }}</a-descriptions-item>
      </a-descriptions>
    </div>
    <div v-else>
      <a-form :model="editForm" layout="vertical">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="姓名" required>
              <a-input v-model:value="editForm.userName" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="宿舍号" required>
              <a-input
                v-model:value="userInfo.dormitoryVO.dormitoryName"
                disabled
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="账号" required>
              <a-input v-model:value="editForm.userAccount" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="密码" required>
              <a-input-password v-model:value="editForm.userPassword" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="24">
            <a-form-item label="简介" required>
              <a-input v-model:value="editForm.userProfile" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <br />
      <div>
        <a-upload
          v-model:file-list="fileList"
          action="
                    http://localhost:8080/api/file/uploadNew"
          list-type="picture"
          @change="handleChange"
        >
          <a-button>
            <upload-outlined></upload-outlined>
            upload
          </a-button>
        </a-upload>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import { getCurrentUser } from "@/api/user";
import { message } from "ant-design-vue";
import { UploadOutlined } from "@ant-design/icons-vue";
// 模拟用户信息
const userInfo = ref({
  id: "1879338355388731393",
  userName: "曹跃跃",
  userAccount: "yupi",
  userPassword: "bfd8fd19b540e01a6aac5db69973d98a",
  userAvatar:
    "https://tse1-mm.cn.bing.net/th/id/OIP-C.qmIh5R-d_DmDKOYgzN09agHaJQ?rs=1&pid=ImgDetMain",
  userProfile:
    "fhdsaihfahdfsaiohdfoahsdgohaodghoadhgofhghdfiuhgosdfhgohadofghdfoghodfhgdfhgoahdfgdadgjodf",
  userRole: "user",
  dormitoryVO: {
    dormitoryId: 1,
    dormitoryName: "201",
    buildingId: 1,
    createTime: "2025-01-15T07:52:49.000+00:00",
    updateTime: "2025-01-15T07:52:49.000+00:00",
    building: {
      buildingId: 1,
      buildingName: "Mo Lu",
      address: "941 Diplomacy Drive",
      createTime: "2006-05-10T23:25:44.000+00:00",
      updateTime: "2022-01-05T09:42:19.000+00:00",
    },
  },
});
const getUserInfo = async () => {
  const res = await getCurrentUser();
  userInfo.value = res.data.data;
};
getUserInfo();
// 编辑状态控制
const isEditing = ref(false);
const editForm = ref({ ...userInfo.value });

// 保存编辑
const handleSave = () => {
  // 这里应该调用后端 API 保存数据
  userInfo.value = { ...editForm.value };
  isEditing.value = false;
  // 显示成功提示
  message.success("个人信息更新成功！");
};

// 取消编辑
const handleCancel = () => {
  editForm.value = { ...userInfo.value };
  isEditing.value = false;
};
export default {
  name: "UserManager",
  components: { UploadOutlined },
};
</script>

<style scoped>
/* tile uploaded pictures */
.upload-list-inline :deep(.ant-upload-list-item) {
  float: left;
  width: 200px;
  margin-right: 8px;
}
.upload-list-inline [class*="-upload-list-rtl"] :deep(.ant-upload-list-item) {
  float: right;
}
</style>
